<template>
  <cj-popup v-if="showMerge" v-model="showMerge" :closeOnClickOverlay="false" round @closed="handerChose">
    <header class="c-fs32 c-pt40 c-pb20 c-fw-b c-textAlign-c">请选择您要绑定的账号</header>
    <article class="c-ph24">
      <section class='c-mb20 c-p c-ph24 c-pv16  c-flex-row c-aligni-center c-br20' v-for='(item,index) in userAccountList' :key="index" :class="selectIndex == index ? 'theme-bd4' : 'c-bd4-EEEEEE'">
        <img class='c-ww72 c-hh72 c-brp50' :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" />
        <div class='c-pl16 c-flex-column c-flex-grow1 c-w0'>
          <div class='c-fs24 c-text-ellipsis1'>{{item.nickname || '未知'}}</div>
          <div class='c-fs20 c-fc-gray c-pt10'>{{vipTypeMap[item.vipType]}}</div>
        </div>
        <div class="check-user c-flex-row c-flex-center" :class="selectIndex == index ? 'theme-bg' : 'c-bg-eee'">
          <span class="iconfont c-fs16 c-fc-white">&#xe8f8;</span>
        </div>
      </section>
    </article>
    <footer class="c-mt10 c-flex-row c-flex-center c-ph24">
      <div @click='clickComfirm' class='c-hh60 c-flex-row c-flex-center c-br40 c-fc-white c-fs28 theme-bg'>确定</div>
    </footer>
  </cj-popup>
</template>

<script>
import { mapState } from 'vuex';
import { utilJs } from '@/utils/common.js';

export default {
  computed: {
    ...mapState({
      bindVerificationCode: state => state.oem_store.bindVerificationCode,
      userAccountList: state => state.oem_store.userAccountList,
      showMergeUserModal: state => state.oem_store.showMergeUserModal
    }),
  },
  watch: {
    showMergeUserModal: {
      handler(val) {
        this.showMerge = val;
        if (val) {
          this.init();
        }
      },
      immediate: true
    }
  },

  data() {
    return {
      showMerge: true,
      selectIndex: 0,
    };
  },
  created() {
    this._isLoading = false;
  },

 methods: {
    init() {
      this._isLoading = false;
      this._companyId = utilJs.getCompanyIdByHerf();
      const customNameInfo = localStorage.getItem("customName") ? JSON.parse(localStorage.getItem("customName")) : {}
      this.vipTypeMap = {
        1: '普通用户',
        2: 'VIP',
        3: customNameInfo.agentName,
        4: 'SVIP',
        5: customNameInfo.partnerName,
        6: customNameInfo.branchName,
        7: customNameInfo.cooName,
        8: customNameInfo.agencyName
      }
    },
    //点击确定按钮
    clickComfirm() {
      if (this._isLoading) {
        return;
      }
      this._isLoading = true;
      let data = {
        mobile: this.userAccountList[this.selectIndex].mobile,
        selectedUserId: this.userAccountList[this.selectIndex].userId,
        code: this.bindVerificationCode,
        companyId: this._companyId,
      };
      utilJs.postMethod(`${global.apiurl}members/confirmBindMobile`, data, res => {
        this.$showCjToast({
          text: "找回成功",
          type: "success",
        }).then(() => {
          localStorage.clear();
          if (utilJs.isIOSApp()) {
            window.webkit.messageHandlers.iosWechatLoginOut.postMessage('loginOut');
            return;
          }
          if (utilJs.isAndroidApp()) {
            utilJs.androidAppExit();
            return;
          }
          window.location.reload(true);
        })
        this._isLoading = false;
      }, failRes => {
        this._isLoading = false;
      });
    },
  }
};
</script>

<style scoped>
.check-user {
  width: 1rem;
  height: 1rem;
  border-radius: 0.5rem 0 0.5rem 0;
  position: absolute;
  bottom: -0.1rem;
  right: -0.1rem;
}
</style>
